<template>
    <ul class="pai-group">
        <li class="pai-item state-now" v-for="(paiObj,index) in todayPaiData.list" :key="index">
            <router-link :to="{name : 'pai-detail'}" class="item-wrap" target="_blank">

                <div class="img-wrap">
                    <!--图片未加载时显示加载图片-->
                    <img :alt="paiObj.name"
                         :src="paiObj.imgUrl">
                </div>
                <div class="item-content">
                    <img class="item-status-over" v-if="!paiStatic"
                         src="//gtms01.alicdn.com/tps/i1/T1x5z2FKJXXXXKN.Q6-114-60.png" alt="">
                    <p class="item-title">{{paiObj.name}}</p>
                    <p class="item-store">
                        <em>送拍机构</em>
                        <span>{{paiObj.company}}</span>
                    </p>
                    <p class="item-cur-price" v-if="paiStatic">
                        <em>当 前 价</em>
                        <span class="amount">
                                        <em>¥</em>
                                        <span>{{paiObj.curPaiPrice}}</span>
                                    </span>
                    </p>

                    <div class="item-countdown" v-if="paiStatic">
                        <span class="countdown-text">距结束</span>
                        <p class="J_PAlbum pai-countdown">
                            <span class="J_TimeLeft">{{countDown.hou}}<i>时</i>{{countDown.min}}<i>分</i>{{countDown.sec}}<i>秒</i></span>
                        </p>
                    </div>
                    <div class="item-amount" v-if="!paiStatic">
                        <span>成交金额</span>
                        <p class="amount"><em>¥</em>{{paiObj.dealPrice}}</p>
                    </div>


                    <div class="item-side-box" :class="paiStatic ? 'item-bid-box' : 'item-amount-box'">
                        <span class="side-num">{{paiObj.bidTotal}}</span>
                        <span class="side-text">次出价</span>
                    </div>

                </div>

            </router-link>
        </li>

        <!--底线-->
        <Baseline style="width: 1200px"/>
    </ul>
</template>

<script>
    import Baseline from "@/components/Baseline"

    export default {
        name: "PaimaiMore_Today",
        components: {Baseline},
        data() {
            return {
                /*定时器*/
                timer: '',
                countDown: {
                    hou: "00",
                    min: "00",
                    sec: "00"
                },
                /*拍卖状态：0结束 1正常*/
                paiStatic: true,
                /*今日专场拍卖商品数据*/
                todayPaiData: {
                    endTime: '2019-11-04 23:59:59',
                    list: [
                        {
                            id: "",/*主键*/
                            name: "【华丽彩宝】奢华彩色宝石首饰",
                            company: "意禄珠宝有限公司",/*拍卖机构*/
                            bidTotal: 97,/*出价次数*/
                            curPaiPrice: 8848,/*当前竞拍价*/
                            dealPrice: 8848,/*成交价*/
                            imgUrl: "https://img.alicdn.com/bao/uploaded/img.alicdn.com/bao/uploaded/i3/O1CN01JoAEuH24NAhWNXMgt_!!0-paimai.jpg_600x600Q90.jpg"
                        },
                        {
                            id: "",/*主键*/
                            name: "手表很多条正品第一条",
                            company: "杭州宜奢电子商务有限公司",/*拍卖机构*/
                            bidTotal: 1112,/*出价次数*/
                            curPaiPrice: 98799,/*当前竞拍价*/
                            dealPrice: 98799,/*成交价*/
                            imgUrl: "https://img.alicdn.com/bao/uploaded/img.alicdn.com/bao/uploaded/i2/O1CN01nsP7zv25dwrhPKIj7_!!0-paimai.jpg_600x600Q90.jpg"
                        },
                        {
                            id: "",/*主键*/
                            name: "手腕上的明信片 瑞士腕表特惠",
                            company: "福州表铺寄卖有限公司",/*拍卖机构*/
                            bidTotal: 162,/*出价次数*/
                            curPaiPrice: 81228,/*当前竞拍价*/
                            dealPrice: 81228,/*成交价*/
                            imgUrl: "https://img.alicdn.com/bao/uploaded/img.alicdn.com/bao/uploaded/i2/O1CN01k17nB71hsYijSOj79_!!0-paimai.jpg_600x600Q90.jpg"
                        },
                        {
                            id: "",/*主键*/
                            name: "平洲精品翡翠冰点低价专场",
                            company: "福州有限公司",/*拍卖机构*/
                            bidTotal: 1322,/*出价次数*/
                            curPaiPrice: 83348,/*当前竞拍价*/
                            dealPrice: 83348,/*成交价*/
                            imgUrl: "https://img.alicdn.com/bao/uploaded/img.alicdn.com/bao/uploaded/https://gw.alicdn.com/tfs/TB1TdhLueuSBuNjy1XcXXcYjFXa-520-220.jpg_600x600Q90.jpg"
                        },
                    ],
                },
            }
        },
        methods: {
            /*专场导航*/
            selectDayNav: function (index) {
                this.dayNavIndex = index
                let dayTitleList = ["今", "明", "昨"]
                this.dayTitle = dayTitleList[index]
            },
            /*设置定时器*/
            setTimer: function () {
                // 获取当前时间，同时得到活动结束时间数组
                let nowTime = new Date().getTime();
                // 对结束时间进行处理渲染到页面
                let endTime = new Date(this.todayPaiData.endTime).getTime();
                // 剩余时长
                let remainTime = (endTime - nowTime) / 1000
                this.timer = setInterval(() => {
                    remainTime -= 1  // 时间减少1s
                    if (remainTime > 0) {
                        // 获取天、时、分、秒
                        let hou = parseInt(remainTime % (60 * 60 * 24) / 3600)
                        let min = parseInt(remainTime % (60 * 60 * 24) % 3600 / 60)
                        let sec = parseInt(remainTime % (60 * 60 * 24) % 3600 % 60)
                        this.countDown = {
                            hou: this.timeFormat(hou),
                            min: this.timeFormat(min),
                            sec: this.timeFormat(sec)
                        };
                    } else { // 活动已结束，全部设置为'00'
                        console.log("今日拍卖结束...")
                        this.countDown = {
                            day: '00',
                            hou: '00',
                            min: '00',
                            sec: '00'
                        }
                        this.paiStatic = false  /*修改拍卖状态*/
                        clearInterval(this.timer)/*清除定时器*/
                    }
                }, 1000);
            },
            /*时间格式化方法*/
            timeFormat(param) {
                return param < 10 ? '0' + param : param;
            },
            /*设置每日拍卖结束时间  每日 23 点 59 分*/
            setEndTime() {
                let nowDate = new Date();
                let year = nowDate.getFullYear();
                let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
                let date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
                this.todayPaiData.endTime = `${year}-${month}-${date} 23:59:59`
                console.log(this.todayPaiData.endTime);
            },
        },
        mounted() {//页面加载后执行方法
            this.setEndTime()/*设置结束时间  每日 23 点 59 分*/
            clearInterval(this.timer)/*清除定时器*/
            this.setTimer()/*设置定时器*/
        },
        beforeDestroy() {//vue实例销毁前执行方法
            /*清除定时器*/
            clearInterval(this.timer)
        },
        computed: {
        },
    }
</script>

<style lang="less" scoped>
    ul.pai-group {
        background-color: #fff;
        width: 886px;
        padding: 2px;

        li.pai-item {
            margin-bottom: 20px;
            background-color: #f6f6f6;
            border: 1px solid #e6e6e6;
            height: 220px;

            a.item-wrap {
                display: block;
                text-decoration: none;

                .img-wrap {
                    background: url(//gtms02.alicdn.com/tps/i2/TB1UXltGXXXXXXhXpXXpJArGXXX-34-34.gif) no-repeat center center;
                    overflow: hidden;
                    float: left;
                    width: 520px;
                    height: 220px;
                }

                .item-content {
                    position: relative;
                    float: left;
                    width: 364px;
                    height: 220px;

                    .item-status-over {
                        display: block;
                        position: absolute;
                        right: 10px;
                        bottom: 15px;
                        width: 114px;
                    }

                    .item-title {
                        display: block;
                        padding-top: 20px;
                        padding-left: 20px;
                        line-height: 30px;
                        text-align: left;
                        width: 245px;
                        color: #0b0b0b;
                        font-weight: 700;
                        font-size: 22px;
                    }

                    .item-store {
                        color: #848484;
                        font-size: 14px;
                        text-align: left;
                        padding-left: 20px;
                        padding-top: 10px;
                        line-height: 25px;

                        span {
                            color: #333;
                            padding-left: 11px;
                            font-size: 14px;
                        }
                    }

                    .item-cur-price {
                        color: #848484;
                        text-align: left;
                        font-size: 14px;
                        padding-left: 20px;
                        line-height: 25px;

                        span.amount {
                            color: #333;
                            padding-left: 11px;
                            width: 150px;
                            font-weight: bolder;

                            span {
                                font-family: "Microsoft YaHei", simhei, sans-serif;
                                color: rgb(193, 31, 58);
                                display: inline;
                                font-size: 18px;
                                padding-left: 3px;
                                font-weight: 700;
                            }
                        }
                    }

                    .item-countdown {
                        position: absolute;
                        bottom: 20px;
                        left: 20px;

                        .countdown-text {
                            color: #848484;
                            font-size: 14px;
                            letter-spacing: .5em;
                            padding-right: 9px;
                            position: relative;
                            top: -2px;
                        }

                        .pai-countdown {
                            color: #c11f3a;
                            display: inline;
                            font-family: Tahoma;
                            font-size: 26px;
                            font-weight: 700;

                            i {
                                color: #848484;
                                font-size: 12px;
                                font-style: normal;
                                font-weight: 400;
                                position: relative;
                                padding: 0 1px;
                                top: -2px;
                            }
                        }
                    }

                    .item-bid-box {
                        color: #f6f6ea;
                        background-color: #c11f3a;
                    }

                    .item-side-box {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 80px;
                        height: 102px;

                        .side-num {
                            position: absolute;
                            left: 0;
                            top: 15px;
                            font-family: Tahoma;
                            font-size: 24px;
                            font-weight: 700;
                            width: 80px;
                            text-align: center;
                        }

                        .side-text {
                            position: absolute;
                            left: 0;
                            bottom: 25px;
                            font-size: 14px;
                            width: 80px;
                            text-align: center;
                        }
                    }

                    .item-look-box {
                        display: none;
                        background-color: #008060;
                        color: #f6f6ea;
                    }

                    .item-amount-box {
                        display: block;
                        background-color: #848484;
                        color: #f6f6ea;
                    }

                    .item-amount {
                        display: block;
                        position: absolute;
                        left: 20px;
                        bottom: 20px;

                        span {
                            color: #800019;
                            display: inline;
                            font-size: 14px;
                            position: relative;
                            top: -2px;
                        }

                        p {
                            font-family: "Microsoft YaHei", simhei, sans-serif;
                            color: #222;
                            display: inline;
                            font-size: 24px;
                            padding-left: 20px;
                            font-weight: 700;

                            em {
                                font-weight: 400;
                                margin-right: 5px;
                                font-size: 15px;
                            }
                        }
                    }
                }
            }
        }

        li.pai-item:hover {
            outline: 2px solid rgb(193, 31, 58);

            .item-title {
                color: rgb(193, 31, 58) !important;
            }
        }

    }
</style>